<template>
  <NuxtLayout name="custom">
    <div class="userPage">
      <section class="userSec">
        <van-image
          round
          fit="cover"
          width="8rem"
          height="8rem"
          src="/minions.jpeg"
        />
        <span>{{ userInfo.email }}</span>
      </section>
      <van-button type="danger" plain block @click="handleLogout">退出登录</van-button>
    </div>
  </NuxtLayout>
</template>
<script lang="ts" setup>
const router = useRouter()
const userInfo = reactive({
  id:0,
  email:''
})
const handleLogout = ()=>{
  const jwt = localStorage.getItem('jwt')
  jwt && localStorage.removeItem('jwt')
  router.push('/login')
}
onMounted(async()=>{
  const user = await http.get<Resource<User>>('/me')
  Object.assign(userInfo,user.resource)
})

</script>
<style scoped lang="scss">
.userPage{
  padding: 48px 16px 68px;
  display: flex;
  flex-direction: column;
  height: 100%;
  row-gap: 68px;
  align-items: center;
  .userSec{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 24px;
  }
}
</style>
